<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞牛影视 - 设置</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/utilities.css">
  <link rel="stylesheet" href="css/remixicon.min.css">
</head>
<body class="theme-dark">
  <div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
     
    </aside>

    <!-- 移动端侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- 主内容区 -->
    <main class="main-content">
       <!-- 顶部导航栏 -->
       <header class="header" id="header">
       
      </header>

      <div class="settings-container">
        <h1 class="page-title">设置</h1>
        <p class="text-muted">管理您的媒体库和应用设置</p>
    
        <div class="settings-tabs">
          <button class="settings-tab active" data-tab="media">媒体库</button>
          <button class="settings-tab" data-tab="appearance">外观</button>
          <button class="settings-tab" data-tab="player">播放器</button>
          <button class="settings-tab" data-tab="system">系统</button>
        </div>
    
        <!-- 媒体库设置 -->
        <div class="settings-panel" data-panel="media">
          <div class="settings-panel-header">
            <h2 class="settings-panel-title">
              <i class="ri-folder-line"></i>
              媒体库管理
            </h2>
            <p class="settings-panel-description">管理您的媒体源和媒体库</p>
            
          </div>
          <div class="settings-form-action">
            <button class="btn btn-primary " id="addSourceButton">
              <i class="ri-add-line"></i> 添加媒体源 
            </button>
          </div>
          <div class="settings-form-group">
            <label class="settings-label-text">媒体源</label>
            <div class="settings-source-list" id="settingsSourceList">
              <!-- 媒体源列表将通过JS动态生成 -->
            </div>
        </div>
    
        <!-- 外观设置 -->
        <div class="settings-panel" data-panel="appearance" style="display: none;">
          <div class="settings-panel-header">
            <h2 class="settings-panel-title">
              <i class="ri-palette-line"></i>
              外观设置
            </h2>
            <p class="settings-panel-description">自定义应用的外观和主题</p>
          </div>
    
          <div class="settings-form-group">
            <div class="settings-label">
              <span class="settings-label-text">深色模式</span>
              <label class="settings-switch">
                <input type="checkbox" checked>
                <span class="settings-switch-slider"></span>
              </label>
            </div>
          </div>
    
          <div class="settings-form-group">
            <label class="settings-label-text">主题色</label>
            <select class="settings-select">
              <option value="blue">蓝色</option>
              <option value="green">绿色</option>
              <option value="purple">紫色</option>
              <option value="orange">橙色</option>
            </select>
          </div>
        </div>
    
        <!-- 播放器设置 -->
        <div class="settings-panel" data-panel="player" style="display: none;">
          <div class="settings-panel-header">
            <h2 class="settings-panel-title">
              <i class="ri-play-circle-line"></i>
              播放器设置
            </h2>
            <p class="settings-panel-description">配置视频播放器的行为</p>
          </div>
    
          <div class="settings-form-group">
            <div class="settings-label">
              <span class="settings-label-text">自动播放</span>
              <label class="settings-switch">
                <input type="checkbox">
                <span class="settings-switch-slider"></span>
              </label>
            </div>
          </div>
    
          <div class="settings-form-group">
            <label class="settings-label-text">默认质量</label>
            <select class="settings-select">
              <option value="1080p">1080p</option>
              <option value="720p">720p</option>
              <option value="480p">480p</option>
            </select>
          </div>
        </div>
    
        <!-- 系统设置 -->
        <div class="settings-panel" data-panel="system" style="display: none;">
          <div class="settings-panel-header">
            <h2 class="settings-panel-title">
              <i class="ri-settings-3-line"></i>
              系统设置
            </h2>
            <p class="settings-panel-description">配置系统和高级选项</p>
          </div>
    
          <div class="settings-form-group">
            <div class="settings-label">
              <span class="settings-label-text">启用缓存</span>
              <label class="settings-switch">
                <input type="checkbox" checked>
                <span class="settings-switch-slider"></span>
              </label>
            </div>
            <p class="settings-description">缓存API响应以提高性能</p>
          </div>
    
          <div class="settings-form-group">
            <label class="settings-label-text">缓存大小限制</label>
            <input type="number" class="settings-input" value="1024" min="100" max="10000">
            <p class="settings-description">单位：MB</p>
          </div>
        </div>
      </div>



    </main>
        <!-- 添加源对话框 -->
        <div class="modal" id="addSourceModal">
          <div class="modal-content">
            <div class="modal-header">
              <h2>添加媒体源</h2>
              <button class="btn-icon modal-close" id="closeAddSourceModal">
                <i class="ri-close-line"></i>
              </button>
            </div>
            <div class="modal-body">
              <form id="addSourceForm">
                <div class="form-group">
                  <label for="sourceName">名称</label>
                  <input type="text" id="sourceName" placeholder="媒体库名称" required>
                </div>
                <!--div class="form-group">
                  <label for="sourceUrl">网站地址</label>
                  <input type="url" id="sourceUrl" placeholder="https://example.com" required>
                </div-->
                <div class="form-group">
                  <label for="sourceApi">API地址</label>
                  <input type="url" id="sourceApi" placeholder="https://api.example.com" required>
                </div>
                <div class="form-group">
                  <label for="sourceProxy">代理地址 (可选)</label>
                  <input type="url" id="sourceProxy" placeholder="https://proxy.example.com">
                </div>
                <div class="form-group">
                  <label for="sourceType">分级</label>
                  <select id="sourceType" required>
                    <option value="nomal">普通</option>
                    <option value="18+">限制级</option>
                  </select>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button class="btn btn-warrin" id="testAddSource">测试</button>
              <button class="btn btn-outline" id="cancelAddSource">取消</button>
              <button class="btn btn-primary" id="saveSourceBtn">保存</button>
            </div>
          </div>
        </div>
  </div>

  <!-- 脚本 -->
  <script src="js/config.js"></script>
  <script src="js/api.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/settings.js"></script>
</body>
</html>